<template>
  <Dialog v-model="dialogVisible" title="详细数据分析" width="1200px">
    <el-tabs v-model="activeTab" type="card">
      <!-- 总体概况 -->
      <el-tab-pane label="总体概况" name="overview">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card>
              <div class="statistic-card">
                <div class="statistic-number">{{ statisticsData.totalCandidates || 0 }}</div>
                <div class="statistic-label">总报名人数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="statistic-card">
                <div class="statistic-number">{{ statisticsData.passedCandidates || 0 }}</div>
                <div class="statistic-label">通过人数</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="statistic-card">
                <div class="statistic-number">{{ getPassRate() }}%</div>
                <div class="statistic-label">通过率</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card>
              <div class="statistic-card">
                <div class="statistic-number">{{ statisticsData.averageScore || 0 }}</div>
                <div class="statistic-label">平均分</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <el-card title="成绩分布">
              <div ref="scoreChartRef" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card title="通过率趋势">
              <div ref="trendChartRef" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <!-- 职业分析 -->
      <el-tab-pane label="职业分析" name="profession">
        <el-table :data="statisticsData.professionStats || []" border style="width: 100%">
          <el-table-column prop="professionName" label="职业名称" />
          <el-table-column prop="totalCount" label="报名人数" width="100" />
          <el-table-column prop="passedCount" label="通过人数" width="100" />
          <el-table-column prop="passRate" label="通过率" width="100">
            <template #default="{ row }">{{ row.passRate }}%</template>
          </el-table-column>
          <el-table-column prop="averageScore" label="平均分" width="100" />
          <el-table-column prop="highestScore" label="最高分" width="100" />
          <el-table-column prop="lowestScore" label="最低分" width="100" />
        </el-table>
      </el-tab-pane>
      
      <!-- 等级分析 -->
      <el-tab-pane label="等级分析" name="level">
        <el-table :data="statisticsData.levelStats || []" border style="width: 100%">
          <el-table-column prop="skillLevel" label="技能等级" width="120">
            <template #default="{ row }">
              <el-tag>{{ getLevelName(row.skillLevel) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="totalCount" label="报名人数" width="100" />
          <el-table-column prop="passedCount" label="通过人数" width="100" />
          <el-table-column prop="passRate" label="通过率" width="100">
            <template #default="{ row }">{{ row.passRate }}%</template>
          </el-table-column>
          <el-table-column prop="averageScore" label="平均分" width="100" />
          <el-table-column prop="theoryAverage" label="理论平均分" width="120" />
          <el-table-column prop="practiceAverage" label="实操平均分" width="120" />
        </el-table>
      </el-tab-pane>
      
      <!-- 时间分析 -->
      <el-tab-pane label="时间分析" name="time">
        <div ref="timeChartRef" style="height: 400px;"></div>
      </el-tab-pane>
    </el-tabs>
    
    <template #footer>
      <el-button @click="exportData">导出数据</el-button>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'

const dialogVisible = ref(false)
const activeTab = ref('overview')
const statisticsData = ref({} as any)
const scoreChartRef = ref()
const trendChartRef = ref()
const timeChartRef = ref()

const getLevelName = (level: number) => {
  const levelMap = { 1: '初级', 2: '中级', 3: '高级', 4: '技师', 5: '高级技师' }
  return levelMap[level] || '-'
}

const getPassRate = () => {
  const total = statisticsData.value.totalCandidates || 0
  const passed = statisticsData.value.passedCandidates || 0
  return total > 0 ? ((passed / total) * 100).toFixed(1) : '0'
}

const initCharts = () => {
  // TODO: 使用echarts初始化图表
  nextTick(() => {
    console.log('初始化图表')
  })
}

const exportData = () => {
  // TODO: 实现数据导出功能
  console.log('导出数据')
}

const open = (data: any) => {
  dialogVisible.value = true
  statisticsData.value = data
  nextTick(() => {
    initCharts()
  })
}

defineExpose({ open })
</script>

<style scoped>
.statistic-card {
  text-align: center;
  padding: 20px;
}

.statistic-number {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.statistic-label {
  font-size: 14px;
  color: #666;
}
</style> 